<template>
  <div>
    <el-menu :default-active="activeIndex1" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="font-weight:bold;">
      <el-menu-item index="1" @click="toHome">首页</el-menu-item>
      <el-menu-item index="2">书籍良品</el-menu-item>
      <el-menu-item index="3">热门书</el-menu-item>
      <el-menu-item index="4" @click="judgeLogin">个人中心</el-menu-item>
      <el-menu-item index="5" v-show="this.$store.state.userInfo.status == 1" @click="adminShop">商城管理中心</el-menu-item>
      <el-button type="text" @click="exit" class="exit" style="color:red">退出</el-button>
      <div class="welcome" v-show="this.$store.state.userInfo.status == 0 || this.$store.state.userInfo.status == 1">
        欢迎光临易易，<el-button type="text">{{this.$store.state.userInfo.username}}</el-button>
      </div>
      <div class="please-login" v-show="this.$store.state.userInfo.status != 0 && this.$store.state.userInfo.status != 1">
        欢迎光临易易，请
        <el-button type="text" style="color:red;" @click="login">登陆</el-button>
        成为会员
      </div>
    </el-menu>
    <div class="search-box">
      <img src="@/assets/yiyi.png" alt="" class="yiyi-logo" width="243px" height="79px">
      <div class="search">
        <input type="text" class="search-all" v-model="searchContent" @focus="searchFocus" @blur="searchBlur">
        <el-button slot="append" icon="el-icon-search" class="search-button"></el-button>
      </div>
      <div class="shopping-car">
        <el-button type="warning" round @click="shopCar">购物车</el-button>
        <el-button type="danger" round @click="myBook">我的订单</el-button>
      </div>
    </div>
    <div class="sort-box">
      <el-menu
          router
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#ffffff"
          text-color="#323232">
          <el-submenu index=''>
            <template slot="title">
              <i class="el-icon-menu"></i><span style="color:red;font-weight:bold;">全部图书分类</span>
            </template>
            <ul class="allSort" style="width:400px">
              <li v-for="(item, index) in allSort" :key=index>
                <router-link :to="item.pathname" >{{item.name}}</router-link>/
              </li>
            </ul>
          </el-submenu>
          <el-menu-item
              style="color: red; border-bottom-color: transparent; background-color: rgb(255, 255, 255);font-weight:bold;"
              v-for="(item, index) in partSort"
              :index="item.pathname"
              :key="index">
              {{ item.name }}
          </el-menu-item>
      </el-menu>
      <!-- <div class="lun-dividing-line">
      </div>  -->
    </div>
    <el-dialog title="个人中心" :visible.sync="outerVisible" :show-close=false center>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="header-ruleForm">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="ruleForm.username" style="width:270px;" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
            <el-input v-model="ruleForm.phone" style="width:270px" placeholder="请输入手机号码" maxlength=11></el-input>
          </el-form-item>
        <el-form-item label="密码" prop="psw">
          <el-input v-model="ruleForm.psw" style="width:270px" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <el-dialog
        width="30%"
        title="修改"
        :visible.sync="innerVisible"
        append-to-body
        :show-close=false
        center>
        <span>检测到个人信息被修改，请保存后再离开</span>
        <div slot="footer" class="dialog-footer">
          <el-button @click="secondCancel">取 消</el-button>
          <el-button type="primary" @click="secondSave('ruleForm')">保 存</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="firstCancel">取 消</el-button>
        <el-button type="primary" @click="firstSave('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data(){
      //个人中心相关验证
      //验证手机号码
      var validatePhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号码'));
        } else {
          //验证输入的账号是否合法
          let reg=/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
          if(!reg.test(value)){
            this.$message.error('手机号码由 0-9之间的数字 组成');
          }else{
            if(value.length == 11){
              callback();
            }else{
              this.$message.error('手机号码由 11 位数字组成');
            }
          }
        }
      };
      //验证姓名
      var validateUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入姓名'));
        } else {
          callback();
        }
      };
      //验证密码
      var validatePsw = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return{
        //个人中心相关
        outerVisible: false,
        innerVisible: false,
        ruleForm: {
          psw: '',
          username: '',
          phone:''
        },
        rules: {
          psw: [
            { validator: validatePsw, trigger: 'blur' }
          ],
          name: [
            { validator: validateUserName, trigger: 'blur' }
          ],
          phone: [
            { validator: validatePhone, trigger: 'blur' }
          ]
        },
        // userInfo:this.$store.state.userInfo,
        //是否显示“请登录文字”
        // pleaseFlag:true,
        activeIndex1:'1',
        searchContent:'编译原理',
        partSort: [
            {
                name: '图书',
                pathname: '/book'
            }
        ],
        allSort: [
              {
                  name: '马列主义毛邓思想',
                  pathname: '/thought'
              },
              {
                  name: '哲学',
                  pathname: '/philosophy'
              },
              {
                  name: '社会科学总论',
                  pathname: '/socialSciences'
              },
              {
                  name: '政治、法律',
                  pathname: '/politicalLaw'
              },
              {
                  name: '军事',
                  pathname: '/military'
              },
              {
                  name: '经济',
                  pathname: '/economics'
              },
              {
                  name: '文化、科学、教育、体育',
                  pathname: '/culture'
              },
              {
                  name: '语言、文字',
                  pathname: '/language'
              },
              {
                  name: '文学',
                  pathname: '/literature'
              },
              {
                  name: '艺术',
                  pathname: '/art'
              },
              {
                  name: '历史、地理',
                  pathname: '/historyGeography'
              },
              {
                  name: '自然科学总论',
                  pathname: '/naturalSciences'
              },
              {
                  name: '数理科学和化学',
                  pathname: '/mathematicsChemistry'
              },
              {
                  name: '天文学、地球科学',
                  pathname: '/astronomy'
              },
              {
                  name: '生物科学',
                  pathname: '/bioscience'
              },
              {
                  name: '医药、卫生',
                  pathname: '/medicine'
              },
              {
                  name: '农业科学',
                  pathname: '/agriculture'
              },
              {
                  name: '工业技术',
                  pathname: '/industry'
              },
              {
                  name: '交通运输',
                  pathname: '/traffic'
              },
              {
                  name: '航空、航天',
                  pathname: '/aviation'
              },
              {
                  name: '环境科学、安全科学',
                  pathname: '/environmentalSecurity'
              },
              {
                  name: '综合性图书',
                  pathname: '/comprehensiveness'
              }
          ],
      }
    },
    methods:{
        //判断是否登录
        ifLogin(){
          if(this.$store.state.userInfo.status != 1 && this.$store.state.userInfo.status != 0){
           this.$message({
                message: '请先登录',
                type: 'warning'
            });
            return;
          }
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        toHome(){
            this.$router.push('/');
        },
        login(){
            this.$router.push('/login');
        },
        exit(){
            this.$router.push('/login');
        },
        searchFocus(){
          this.searchContent = '';
        },
        searchBlur(){
          if(this.searchContent == ''){
            this.searchContent = '编译原理';
          }
        },
        adminShop(){
          this.$router.push('/adminShop');
        },
        //点击购物车
        shopCar(){
          this.ifLogin();
          alert("success");
        },
        //点击我的订单
        myBook(){
          this.ifLogin();
          console.log(this.$store.state.bookDetail);
        },
        //个人中心相关
        //判断是否登录
        judgeLogin(){
          if(this.$store.state.userInfo.status == 1 || this.$store.state.userInfo.status == 0){
            this.outerVisible = true;
            this.ruleForm.username = this.$store.state.userInfo.username;
            this.ruleForm.psw = this.$store.state.userInfo.password;
            this.ruleForm.phone = this.$store.state.userInfo.phone;
          }else{
            this.$message({
                message: '请先登录',
                type: 'warning'
            });
          }
        },
        //第二个保存按钮
        secondSave(formName){
          this.firstSave(formName);
        },
        //第一个取消按钮
        firstCancel(){
          if(this.$store.state.userInfo.username != this.ruleForm.username || this.$store.state.userInfo.phone != this.ruleForm.phone || this.$store.state.userInfo.password != this.ruleForm.psw){
            this.innerVisible = true;
          }else{
            this.outerVisible = false;
            this.innerVisible = false;
          }
        },
        //第二个取消按钮
        secondCancel(){
          this.outerVisible = false;
          this.innerVisible = false;
        },
        //第一个保存按钮
        firstSave(formName){
          //判断是否修改内容
          if(this.$store.state.userInfo.username == this.ruleForm.username && this.$store.state.userInfo.phone == this.ruleForm.phone && this.$store.state.userInfo.psw == this.ruleForm.psw){
            //关闭个人中心
            this.secondCancel();
          }else{
            //做了修改
            this.$refs[formName].validate((valid) => {
              if (valid) {
                //修改用户信息接口
                // this.$axios.post('http://localhost:8081/user/update',{
                this.$axios.post('/changeUser',{
                  id:this.$store.state.userInfo.id,
                  phone:this.ruleForm.phone,
                  username:this.ruleForm.username,
                  psw:this.ruleForm.psw,
                  status:0,
                })
                .then(res => {
                  console.log(res.data);
                  if(res.data.message === 'success'){
                    console.log('fore           ' + res.data.data);
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    //更新用户信息
                    this.$store.state.userInfo.phone = this.ruleForm.phone;
                    this.$store.state.userInfo.username = this.ruleForm.username;
                    this.$store.state.userInfo.psw = this.ruleForm.psw;
                    console.log('22222222222         ' + this.$store.state.userInfo.psw,this.$store.state.userInfo.username,this.$store.state.userInfo.phone);
                    //关闭个人中心
                    this.secondCancel();
                  }else if(res.data.message === 'error'){
                    this.$message.error('修改失败');
                  } 
                }).catch( err => {
                  //请求异常
                  console.log(err);
                });
              } else {
                this.$message.error('请根据提示重新填写');
                return false;
              }
            });
          }
        },
    }
}
</script>

<style scoped>
/*轮播图分割线*/
.lun-dividing-line{
  /*背景色渐变*/
  width: 100%;
  height: 5px;
  background: linear-gradient(right, #e97e7e, #86e6b6);
}
/*标题，搜索框，购物车样式*/
.shopping-car{
  margin-right: 3%;
}
.search-box{
  display: flex;
  justify-content: space-between;
  align-items:center;
  /* border: 1px solid red; */
}
.search{
  display: flex;
  flex-direction: row;
  align-items:center;
  width: 500px;
  height: 100px;
  line-height: 100px;
  animation: fade-in;/*动画名称*/  
  animation-duration: 2s;/*动画持续时间*/  
  -webkit-animation:fade-in 2s;/*针对webkit内核*/ 
}
.search-all{
  border: 2px solid #e6a23c;
  width: 430px;
  height: 36px;
  padding-left: 10px;
}
.search input:focus{
  background:none;
  outline:none;
  border:0px;
  border: 2px solid#ff2832;
}

/* 个人中心相关 */
.header-ruleForm{
  margin-left: 150px;
}
.please-login,.welcome{
  float: right;
  margin-right: 95px;
  height: 60px;
  line-height: 60px;
}
.exit{
  float: right;
  margin-right: 25px;
  margin-top: 12px;
}
@keyframes fade-in {  
  0% {opacity: 0;}/*初始状态 透明度为0*/  
  40% {opacity: 0;}/*过渡状态 透明度为0*/  
  100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
  0% {opacity: 0;}  
  40% {opacity: 0;}  
  100% {opacity: 1;}  
}  
.sort-box{
  /* border: 1px solid red; */
}
.part-sort:hover{
}
.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 40px;
  line-height: 40px;
  border-bottom: 2px solid transparent;
  color: #909399;
}
.allSort a{
  text-decoration: none;
  color: black;
}
.allSort li{
  float: left;
  list-style-type: none;
  margin: 20px;
}
.allSort a:hover{
  color: #409eff;
  border-bottom: 1.5px solid #ff7f27;
}
</style>